<template>
	<el-card class="box-card mt-2">
		<SalesHeader @eTabActive="eTabActive" />
		<div class="sales-chart">
			<SalesChart :options="getChartOptions" />
			<SalesRankingList :list="list" />
		</div>
	</el-card>
</template>
<script>
import SalesHeader from '../SalesHeader/index';
import SalesRankingList from '../SalesRankingList/index';
import SalesChart from '../SalesChart/index';

export default {
	name: 'salesView',
	components: {
		SalesHeader,
		SalesRankingList,
		SalesChart,
	},
	data() {
		return {
			tabActive: 'sale',
			list: [
				{
					id: '001',
					title: '肯德基',
					count: '323234',
				},
				{
					id: '002',
					title: '麦当劳',
					count: '12323',
				},
				{
					id: '003',
					title: '德克士',
					count: '38234',
				},
				{
					id: '004',
					title: '海底捞',
					count: '923234',
				},
				{
					id: '005',
					title: '西贝筱面村',
					count: '232234',
				},
				{
					id: '006',
					title: '汉堡王',
					count: '120034',
				},
				{
					id: '007',
					title: '真功夫',
					count: '323234',
				},
			],
		};
	},
	computed: {
		getChartOptions() {
			if (this.tabActive === 'sale') {
				return {
					title: {
						text: '年度销售业绩数据',
						textStyle: {
							fontSize: 12,
							color: '#666',
						},
						left: 0,
						top: 20,
					},
					color: ['#3398DB'], // 图表颜色
					xAxis: {
						data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
						axisTick: {
							alignWithLabel: true,
							lineStyle: {
								color: '#999', // 刻度颜色
							},
						},
						axisLine: {
							lineStyle: {
								color: '#999', // 线条颜色
							},
						},
						axisLabel: {
							color: '#333', // 文字颜色
						},
					},
					yAxis: {
						splitLine: {
							lineStyle: {
								type: 'dotted',
								color: '#eee',
							},
						},
						axisLine: {
							show: false, // 线段
						},
						axisTick: {
							show: false, // 刻度线
						},
					},
					grid: {
						left: 30,
						right: 0,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
						},
					},
					series: {
						barWidth: '30%', // 图表宽度
						name: 'sale',
						type: 'bar',
						data: [400, 150, 70, 70, 170, 70, 100, 190, 120, 90, 150, 100, 120],
					},
				};
			}
			return {
				title: {
					text: '年度用户访问数据',
					textStyle: {
						fontSize: 12,
						color: '#666',
					},
					left: 0,
					top: 20,
				},
				color: ['#3398DB'], // 图表颜色
				xAxis: {
					data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
					axisTick: {
						alignWithLabel: true,
						lineStyle: {
							color: '#999', // 刻度颜色
						},
					},
					axisLine: {
						lineStyle: {
							color: '#999', // 线条颜色
						},
					},
					axisLabel: {
						color: '#333', // 文字颜色
					},
				},
				yAxis: {
					splitLine: {
						lineStyle: {
							type: 'dotted',
							color: '#eee',
						},
					},
					axisLine: {
						show: false, // 线段
					},
					axisTick: {
						show: false, // 刻度线
					},
				},
				grid: {
					left: 30,
					right: 0,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				series: {
					barWidth: '30%', // 图表宽度
					name: 'sale',
					type: 'bar',
					data: [100, 190, 120, 90, 150, 100, 120, 90, 150, 70, 70, 170, 70],
				},
			};
		},
	},
	methods: {
		eTabActive(val) {
			this.tabActive = val;
		},
	},
};
</script>
<style lang="scss" scoped>
.sales-chart {
	display: flex;
	justify-content: space-between;
}
</style>
